<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <div v-for="item in goodsList" :key="item.id">
        <h3>{{item.goodsName}}</h3>
        <p>价格：{{item.goodsPrice | currency("$",3)}}</p>
        <p>上架时间：{{item.addTime | date}}</p>
        <hr/>
    </div>
</div>
</body>
<script>
    // 1- 过滤器需要写到名字为filters的选项中
    // 2- filters的值是一个对象，对象的名字即是过滤器的名字;
    //    对象的值的类型是函数，函数的返回值即是渲染的内容
    //    函数接收的第一个参数即是要过滤的数据,从第二个参数开始接收指定的数据
    //
    // 3- 用处有两种：
    //    3-1- 插值表达式中：
    //          未指定数据{{goodsPrice | currency}}
    //          未指定数据{{goodsPrice | currency("$",3)}}
    //    3-2- 属性绑定中
	new Vue({
		el:"#root",
        data:{
			goodsList:[
				{
					id:1,
					goodsName:"梨",
					goodsPrice:34.567,
					addTime:Date.now()-999999999999
				},
				{
					id:2,
					goodsName:"桃子",
					goodsPrice:78.99899,
					addTime:Date.now()-88888888888
				}
			]
        },
        filters:{
			currency(v,type="￥",len=2){
				return type+v.toFixed(len);
            },
            date(v){
				const time = new Date(v);
				return time.getFullYear()+"-"+
					(time.getMonth()+1).toString().padStart(2,0)+"-"+
					time.getDate().toString().padStart(2,0)+" "+
					time.getHours().toString().padStart(2,0)+":"+
					time.getMinutes().toString().padStart(2,0)+":"+
					time.getSeconds().toString().padStart(2,0);
            }
        }
	})
</script>
</html>